<!DOCTYPE html>
<html lang="UTF-8" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keys" content="">
    <meta name="author" content="">
	<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="/css/font-awesome.min.css">
	<link rel="stylesheet" href="/css/login.css">
	<style>

	</style>
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <div><a class="navbar-brand" href="index.html" style="font-size:32px;">尚筹网-创意产品众筹平台</a></div>
        </div>
      </div>
    </nav>

    <div class="container">

      <form class="form-signin" role="form" th:action="@{/member/manager/do/register}" method="post">
        <h2 class="form-signin-heading"><i class="glyphicon glyphicon-log-in"></i> 用户注册</h2>
		  <div class="form-group has-success has-feedback">
			<input name="loginacct" type="text" class="form-control" id="loginacct" placeholder="请输入登录账号" autofocus>
			<span class="glyphicon glyphicon-user form-control-feedback"></span>
		  </div>
		  <div class="form-group has-success has-feedback">
			<input name="userpswd" type="password" class="form-control" id="userpswd" placeholder="请输入登录密码" style="margin-top:10px;">
			<span class="glyphicon glyphicon-lock form-control-feedback"></span>
		  </div>
		  <div class="form-group has-success has-feedback">
			<input name="phoneNum" type="text" class="form-control" id="phoneNum" placeholder="请输入手机号" style="margin-top:10px;">
			<span class="glyphicon glyphicon glyphicon-envelope form-control-feedback"></span>
		  </div>
		  <div class="form-group has-success has-feedback">
              <input name="randomCode" type="text" class="form-control" id="randomCode" placeholder="请输入验证码" style="margin-top:10px;">
              <span class="glyphicon glyphicon-copyright-mark form-control-feedback"></span>
		  </div>
          <div class="form-group has-success has-feedback">
              <button id="randomCodeBtn" class="btn btn-success">发送验证码</button>

          </div>
          <button class="btn btn-lg btn-success btn-block">注册</button>
      </form>
    </div>
    <script src="/jquery/jquery-2.1.1.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    <script>
        var sec = 5;//计时器剩余秒数
        var isStop = 0;//定时器的登录状态
        $(function () {
            $('#randomCodeBtn').click(function () {
                //验证手机号
                var phoneNum = $('#phoneNum').val();
                if(phoneNum.length == 0){
                    alert("手机号不能为空");
                    return;
                }
                //禁用按钮
                $('#randomCodeBtn').attr("disabled",true);
                //启动定时器
                isStop = setInterval("time()",1000);
                //发送请求
                $.getJSON("/member/manager/do/randomCode",{phoneNum:phoneNum},function (resultEntity) {
                    if(resultEntity.result == "SUCCESS"){
                        alert("验证码发送成功，请查收")
                    }else {
                        alert(resultEntity.message);
                    }
                });
            });
        });
        function time() {
            if(sec>0){
                sec--;
                $('#randomCodeBtn').text(sec+'s后,重新发送');
            }else {
                sec = 5;
                $('#randomCodeBtn').attr("disabled",false);
                $('#randomCodeBtn').text('重新发送');
                clearInterval(isStop);
            }
        }
    </script>
  </body>
</html>